<template>
  <div class="mask">
  <div class="div">
    <div class="top">
      <p>|</p>
      <span>添加考勤组</span>
    </div>
    <div class="dtop" :model="listut">
      <div class="wen">
        <span class="bb">| </span>
        <span class="pp">基本信息</span>
      </div>

      <div class="top0">
        <p>考勤组名称*</p>
        <el-input
          placeholder="请输入考勤组名称"
          v-model="listut.name"
          size="large"
          type="text"
          autocomplete="off"
        />
      </div>
      <div class="top1">
        <p>备注</p>
        <el-select
          v-model="value"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="备注"
          :remote-method="remoteMethod"
          :loading="loading"
        >
        </el-select>
      </div>
      <div class="top1">
        <p>所属项目*</p>
        <el-select
          clearable
          v-model="listut.items"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in goods"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="new">
      <span class="newb">|</span>
      <span>用户配置</span>
    </div>
    <div class="dpei">
      <div class="left">
        <span class="yong">可选用户</span>
        <div class="lieb">
          <div class="top0">
            <span>搜索</span>
            <el-input
              placeholder="请输入姓名/联系人"
              v-model="query.name"
              size="large"
              type="text"
              autocomplete="off"
            />
          </div>
          <div class="ren">
            <span>人员类型</span>
            <el-select
              clearable
              v-model="query.type"
              class="m-2"
              placeholder="Select"
              size="large"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="lieba">
          <div class="ren">
            <span>所在承建商</span>
            <el-select
              clearable
              v-model="query.contractor"
              class="m-2"
              placeholder="Select"
              size="large"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="ren">
            <span>所在班组</span>
            <el-select
              v-model="query.class"
              clearable
              placeholder="---请选择---"
            >
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <el-button type="success" class="sou" @click="changobtn"
            >搜索</el-button
          >
        </div>

        <div class="table">
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            height="200"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="姓名" prop="name"> </el-table-column>
            <el-table-column property="name" label="联系手机" prop="phone" />
            <el-table-column
              property="address"
              label="所在承建商"
              prop="contractor"
            />
            <el-table-column property="address" label="人员类型" prop="type" />
            <el-table-column property="name" label="所在班组" prop="class" />
          </el-table>
        </div>
      </div>
      <div class="middle">
        <div class="box">
          <input type="checkbox" />
        </div>
      </div>
      <div class="right">
        <div class="top">
          <span>已选用户</span>
          <p>3人</p>
        </div>
        <div class="list">
          <div class="people">
            <span>hah</span>
            <input type="checkbox" />
          </div>
        </div>
      </div>
    </div>
    <el-divider />
    <div class="bao">
      <el-button type="warning" @click="cun">保存</el-button>
      <el-button type="info" @click="obtns">取消</el-button>
    </div>
  </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import service from '../../../utils/service'
import { ElTable } from "element-plus";
import { ElMessage } from "element-plus";

const value = ref("");
const goods = reactive<any[]>([]);
const options1 = reactive<any[]>([]);
const options2 = reactive<any[]>([]);
const options3 = reactive<any[]>([]);
const loading = ref(false);
const remoteMethod = (query: string) => {};

interface Iiebiao {
  name: string;
  phone: string;
  contractor: string;
  groups: string;
  class: string;
  type: string;
}
const tableData = reactive<Iiebiao[]>([]);
const liebiao = () => {
  service({
    url: "/peoples",
  }).then((res) => {
    tableData.push(...res.data);
  });
};
liebiao();
//下拉数据
const changla = () => {
  service({
    url: "/Project",
  }).then((res) => {
    goods.push(...res.data);
  });
};
changla();
const changla1 = () => {
  service({
    url: "/Contractor",
  }).then((res) => {
    options1.push(...res.data);
    console.log(options1);
  });
};
changla1();
const changla2 = () => {
  service({
    url: "/Personneltype",
  }).then((res) => {
    options2.push(...res.data);
  });
};
changla2();
const changla3 = () => {
  service({
    url: "/class",
  }).then((res) => {
    options3.push(...res.data);
  });
};
changla3();

//搜索
const query = reactive<{
  name?: string;
  type?: string;
  contractor?: string;
  class?: string;
}>({
  name: "",
  type: "",
  contractor: "",
  class: "",
});
const changobtn = () => {
  service({
    url: "http://localhost:3000/peoples",
    method: "get",
    params: {
      name: query.name,
      type: query.type,
      contractor: query.contractor,
      class: query.class,
    },
  }).then((res) => {
    tableData.length = 0;
    tableData.push(...res.data);
    console.log(res.data);
  });
};
const props = defineProps<{
  id: string;
}>();
// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();
// 取消
const obtns = () => {
  // 触发隐藏事件
  emit("hide");
};
//修改
interface Iput {
  id: string;
  name: string;
  num: string;
  items: string;
}
const listut = reactive<Iput>({
  id: "",
  name: "",
  num: "",
  items: "",
});
const changput = () => {
  service({
    url: "/lists",
    params: {
      id: props.id,
    },
  }).then((res) => {
    console.log(res);
    listut.name = res.data[0].name;
    listut.items = res.data[0].items;
    listut.num = res.data[0].mum;
  });
};
watch(
  props,
  () => {
    changput();
    listut.name = "";
  },
  {
    deep: true,
  }
);
const cun = () => {
  service({
    url: `http://localhost:3000/lists/${props.id}`,
    method: "patch",
    data: listut,
  }).then((res) => {
    ElMessage({
      message: "修改成功！",
      type: "success",
    });
    location.reload();
    emit("hide");
    emit("updatesuccess");
  });
};
</script>

<style scoped>
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.div {
  width: 939px;
  height: 700px;
  background-color: rgb(235, 238, 238);
  position: fixed;
  top: 1px;
  left: 300px;
  z-index: 100;
  overflow: auto;
  
}
.top{
  display: flex;
 
}
.top p{
  color: #3bb19c;
  
}
.top span{
  font-weight: 700;
  
}
.dtop{
  margin-top: -11px;
}
.div .dtop span {
  font-weight: 700;
  margin-left: 50px;
}
.div .dtop .top0{
  width: 400px;
  display: flex;
  margin-left: 30px;
  height: 30px;
 
}
.div .dtop .top0 p{
  line-height: 30px;
}
.div .dtop .top0 .el-input{
  width: 200px;
  margin-left: 30px;
  height: 30px;
}

.div .dtop .top1 {
  width: 400px;
  display: flex;
  margin: 15px 50px;
}
.div .dtop .top1 .el-select {
  width: 250px;
  margin-left: 30px;
}
.div .dpei {
  margin-left: 50px;
  display: flex;
}
.div .dpei .left {
  border: 1px solid #eaeaea;
}
.div .dpei .left .yong {
  height: 30px;
  line-height: 30px;
  background-color: white;
  display: block;
}
.div .dpei .left .lieb {
  display: flex;
  margin: 15px;
  justify-content: space-evenly;

}
.div .dpei .left .el-select {
  margin-left: 10px;
}
.div .dpei .left .lieb .top2 {
  display: flex;
}

  
  

.div .dpei .left .lieb .top0 .el-input{
  margin-left: 27px;
  margin-top: -35px;
  
}


.div .dpei .left .lieb .ren {
  margin-left: 27px;
  display: flex;
}
.div .dpei .left .lieba {
  display: flex;
  margin: 10px;
}
.div .dpei .left .lieba .ren{
  display: flex;
  margin-left: 5px;
}
.div .dpei .left .lieba .ren .el-option{
  width: 150px;
}


.div .dpei .left .lieba .sou {
  margin-left: 10px;
}
.dpei .middle .box {
  width: 50px;
  height: 50px;
  border: 1px solid #eaeaea;
  margin-left: 20px;
  margin-top: 138px;
  border-radius: 5px;
}
.dpei .middle .box input {
  margin-left: 15px;
  margin-top: 15px;
}
.dpei .right {
  width: 200px;
  border: 1px solid black;
  margin: 0 10px;
}
.dpei .right .top {
  display: flex;
  justify-content: space-around;
}
.dpei .right .list .people {
  display: flex;
  justify-content: space-around;
}
.bao {
  float: right;
  margin-right: 100px;
  margin-top: -10px;
}
.div .new {
  margin-left: 50px;
  font-weight: 700;
}
.div .new .newb {
  color: #3bb19c;
}

.div .dtop .wen .bb {
  color: #3bb19c;
}
.div .dtop .wen .pp {
  margin-left: 0;
}
.el-divider{
  margin-top: 10px;
}
</style>